import React from 'react';
import { PickerView } from 'antd-mobile';

// 化简结构    [{} , {}]
const season = [
  {
    // label 用于显示的
    label: '春',
    // value 用于获取数据的
    value: '0',
  },
  {
    label: '夏',
    value: '1',
  },
  {
    label: '秋',
    value: '2',
  },
];
// 难点：这里的数据有 80 行，分析一下内部数据的结构和页面呈现的结果
// 化简结构    [{ xx:xx, children:[ yy:yy, children: [ zz:zz ] ] } , { ... }]
const province = [
  {
    label: '北京',
    value: '01',
    children: [
      {
        label: '东城区',
        value: '01-1',
      },
      {
        label: '西城区',
        value: '01-2',
      },
      {
        label: '崇文区',
        value: '01-3',
      },
      {
        label: '宣武区',
        value: '01-4',
      },
    ],
  },
  {
    label: '浙江',
    value: '02',
    children: [
      {
        label: '杭州',
        value: '02-1',
        children: [
          {
            label: '西湖区',
            value: '02-1-1',
          },
          {
            label: '上城区',
            value: '02-1-2',
          },
          {
            label: '江干区',
            value: '02-1-3',
          },
          {
            label: '下城区',
            value: '02-1-4',
          },
        ],
      },
      {
        label: '宁波',
        value: '02-2',
        children: [
          {
            label: 'xx区',
            value: '02-2-1',
          },
          {
            label: 'yy区',
            value: '02-2-2',
          },
        ],
      },
      {
        label: '温州',
        value: '02-3',
      },
      {
        label: '嘉兴',
        value: '02-4',
      },
      {
        label: '湖州',
        value: '02-5',
      },
      {
        label: '绍兴',
        value: '02-6',
      },
    ],
  },
];

class AntdmPickerView extends React.Component {
  state = {
    // 设置默认值，要求数组格式
    value: ['2'],
    // 如果是 null，默认选中数组的第一项
    provinceValue: null,
  };

  onChange = (value) => {
    console.log('onChange', value);
    this.setState({ value });
  };

  getProvinceValue = (provinceValue) => {
    console.log('onChange', provinceValue);
    this.setState({ provinceValue });
  };


  onScrollChange = (value) => {
    console.log('onScrollChange', value);
  };

  render() {
    return (
      <div>
        <div>------------------</div>
        <PickerView
          // data 数据源
          data={season}
          // value 绑定默认值
          value={this.state.value}
          // onChange 当手指松开的时候触发一次
          onChange={this.onChange}
          // onScrollChange 了解即可，滚动的时候就会触发
          onScrollChange={this.onScrollChange}
          // cascade 级联 - 默认值为 true - 自动关联数据源的 children 子项
          cascade={true}
          // cols 列数 - 默认 3 列
          cols={1}
        />
        <div>------------------</div>
        <PickerView
          data={province}
          value={this.state.provinceValue}
          onChange={this.getProvinceValue}
          cascade={true}
        />
      </div>
    );
  }
}

export default AntdmPickerView;